<template>
  <div v-loading="loading" class="app-container">
    <el-collapse v-model="activeName" accordion>
      <el-collapse-item name="1">
        <template slot="title">
          <i class="el-icon-search" />搜索栏
        </template>
        <div class="head-container">
          <el-form :model="params" :inline="true" label-width="auto" size="mini" @keyup.enter.native="toQuery">
            <el-form-item label="主题:">
              <el-input v-model="params.scheduleSubject" size="mini" placeholder="请输入" style="width: 200px;" clearable />
            </el-form-item>
            <el-form-item label="部类:">
              <el-select v-model="params.scheduleType" placeholder="请选择" style="width: 200px;" clearable>
                <el-option v-for="item in getSelector().scheduleTypes" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="状态:">
              <el-select v-model="params.dataStatus" placeholder="请选择" style="width: 200px;" clearable>
                <el-option v-for="item in getSelector().scheduleStatusList" :key="item.value" :label="item.name" :value="item.value" />
              </el-select>
            </el-form-item>
            <!--
            <el-form-item label="开始日期:">
              <el-date-picker v-model="params.startEffectiveDate" size="mini" type="date" format="MM/dd/yyyy" placeholder="选择日期" style="width: 130px;" />至
              <el-date-picker v-model="params.endEffectiveDate" size="mini" type="date" format="MM/dd/yyyy" placeholder="选择日期" style="width: 130px;" />
            </el-form-item>
            <el-form-item label="结束日期:">
              <el-date-picker v-model="params.startExpirationDate" size="mini" type="date" format="MM/dd/yyyy" placeholder="选择日期" style="width: 130px;" />至
              <el-date-picker v-model="params.endExpirationDate" size="mini" type="date" format="MM/dd/yyyy" placeholder="选择日期" style="width: 130px;" />
            </el-form-item>-->
            <el-form-item>
              <!--
              <el-button size="mini" type="primary" icon="el-icon-search" round @click="toQuery">查询</el-button>
              <el-button size="mini" type="primary" icon="el-icon-refresh" round @click="resetForm">重置</el-button>
              -->
              <el-button size="mini" type="primary" round @click="toQuery">查询</el-button>
              <el-button size="mini" type="primary" round @click="resetForm">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-collapse-item>
    </el-collapse>
    <div style="padding-top:5px">
      <!--<el-button size="mini" type="danger" style="float:right;margin-bottom:5px;margin-left:5px;" round icon="el-icon-remove" @click="batchDelete">删除</el-button>
      <el-button size="mini" type="success" style="float:right;margin-bottom:5px;" round icon="el-icon-circle-plus" @click="toAdd">新增</el-button>-->
      <el-button size="mini" type="success" style="float:right;margin-bottom:5px;" round @click="toAdd">新增</el-button>
      <el-table
        ref="rule3Table"
        :data="data"
        :row-key="getRowKeys"
        stripe
        size="small"
        border
        style="width: 100%;"
        :header-cell-style="{ height: '0px', padding: '0px' }"
        :row-style="{height: '0px'}"
        :cell-style="{padding: '0px'}"
        :height="tableHeight"
        @row-click="rowClick"
        @sort-change="sortChange"
        @selection-change="handleSelectionChange"
        @header-dragend="colChange"
      >
        <el-table-column :reserve-selection="true" type="selection" align="center" width="55" />
        <el-table-column :show-overflow-tooltip="true" type="index" label="序号" fixed="left" :width="colWidths.index" />
        <el-table-column :show-overflow-tooltip="true" label="主题" prop="scheduleSubject" :width="colWidths.scheduleSubject?colWidths.scheduleSubject:250" />
        <el-table-column :show-overflow-tooltip="true" label="部类" prop="scheduleType" :width="colWidths.scheduleType?colWidths.scheduleType:150">
          <template slot-scope="scope">
            <span>{{ showNameByValue(scope.row.scheduleType, getSelector().scheduleTypes) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="档期分类" prop="scheduleType" :width="colWidths.scheduleGroup?colWidths.scheduleGroup:150">
          <template slot-scope="scope">
            <span>{{ showNameByValue(scope.row.scheduleGroup, getSelector().scheduleGroups) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="开始日期" prop="effDate" sortable :width="colWidths.effDate?colWidths.effDate: 150">
          <template slot-scope="scope">
            <span>{{ parseToString(scope.row.effDate, 'yyyy-MM-dd') }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="结束日期" prop="operationEndDate" sortable :width="colWidths.operationEndDate?colWidths.operationEndDate:150">
          <template slot-scope="scope">
            <span>{{ parseToString(scope.row.operationEndDate, 'yyyy-MM-dd') }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="状态" prop="dataStatus" sortable :width="colWidths.dataStatus?colWidths.dataStatus:150">
          <template slot-scope="scope">
            <span>{{ showNameByValue(scope.row.dataStatus, getSelector().scheduleStatusList) }}</span>
          </template>
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" label="最后更新人" sortable prop="updatedBy" :width="colWidths.updatedBy ? colWidths.updatedBy : 120" />
        <el-table-column :show-overflow-tooltip="true" label="更新时间" sortable prop="updatedTime" :width="colWidths.updatedTime ? colWidths.updatedTime : 135">
          <template slot-scope="scope">
            <span>{{ parseToString(scope.row.updatedTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="operation" align="left" fixed="right" width="185">
          <template slot-scope="scope">
            <list-operation :parent="currentObj" :phase="scope.row" />
          </template>
        </el-table-column>
      </el-table>
      <!--分页组件-->
      <el-pagination
        :total="total"
        :current-page.sync="currentPage"
        style="margin-top: 8px;"
        layout="total, prev, pager, next, sizes"
        :page-size="size"
        @size-change="sizeChange"
        @current-change="pageChange"
      />
    </div>
    <edit ref="edit" :parent="currentObj" />
  </div>
</template>
<script>
import initData from '@/api/olm/initData'
import { parseToString } from '@/utils/datefromat'
import { getSelector } from './js/edit.js'
import { deleteById, batchDelete, publish } from '@/api/olm/schedule'
import listOperation from '@/views/olm/part/list-operation'
import edit from './edit'
import { Message } from 'element-ui'
import { showNameByValue } from '@/utils/selectUtil'

export default {
  components: { listOperation, edit },
  mixins: [initData],
  data() {
    return {
      loading: false,
      syncTime: [],
      activeName: '1',
      ids: [],
      checkedRows: [],
      currentObj: this,
      tableHeight: window.innerHeight * 0.65
    }
  },
  watch: {
    data: {
      handler(n, o) {
        this.$nextTick(() => {
          this.$refs.rule3Table.doLayout()
        })
      }
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    parseToString,
    getSelector,
    showNameByValue,
    // 查询栏重置触发
    resetForm() {
      this.param = { }
    },
    // 列表多选框触发
    handleSelectionChange(val) {
      this.ids = []
      val.forEach(item => {
        this.ids.push(item.id)
      })
    },
    // 翻页选择row的key值
    getRowKeys(row) {
      return row.id
    },
    beforeInit() {
      this.url = process.env.VUE_APP_BASE_API3 + '/schedule/queryPageList'
      return true
    },
    rowClick(row) {
      this.$refs.rule3Table.clearSelection(this.multipleSelection)
      this.$refs.rule3Table.toggleRowSelection(row, true)
    },
    // 列表排序触发
    sortChange(val) {
      const sortCol = val.prop.replace(/([A-Z])/g, '_$1').toUpperCase()
      let sortType = ''
      if (val.order === 'descending') {
        sortType = ' DESC'
      } else if (val.order === 'ascending') {
        sortType = ' ASC'
      }
      this.param.sort = sortCol + sortType
      this.init()
    },
    // 查询
    toQuery() {
      this.page = 0
      this.currentPage = 1
      this.init()
    },
    // 新增
    toAdd() {
      const edit = this.$refs.edit
      edit.title = '新增'
      edit.dialog = true
      edit.setSelectedTreeNodes()
      edit.currentOperate = 'ADD'
      console.log('toadd')
    },
    // 修改
    toEdit(phase) {
      const edit = this.$refs.edit
      var json = JSON.stringify(phase)
      var copyPhase = JSON.parse(json)
      edit.phase = copyPhase
      edit.title = '修改'
      edit.currentOperate = 'EDIT'
      edit.setSelectedTreeNodes()
      edit.setCategorys(phase.scheduleType)
      edit.dialog = true
      console.log('toEdit')
    },
    // 查看
    toView(phase) {
      const edit = this.$refs.edit
      var json = JSON.stringify(phase)
      var copyPhase = JSON.parse(json)
      edit.phase = copyPhase
      edit.title = '查看'
      edit.currentOperate = 'VIEW'
      edit.setSelectedTreeNodes()
      edit.setCategorys(phase.scheduleType)
      edit.dialog = true
      console.log('toView')
    },
    // 删除
    deleteById(row) {
      console.log('delete:' + row.id)
      var _this = this
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(row.id).then(res => {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 2 * 1000
          })
          _this.toQuery()
          _this.$refs.rule3Table.clearSelection(_this.multipleSelection)
        })
      })
    },
    toPublish(phase) {
      var _this = this
      const edit = this.$refs.edit
      edit.phase = phase
      // 校验日期
      var error = edit.validate.validate()
      if (error && error.length > 0) {
        var html = []
        error.forEach((item, index) => {
          html.push('<div>' + (index + 1) + '. ' + item + '</div>')
        })
        Message({
          message: html.join(''),
          type: 'error',
          dangerouslyUseHTMLString: true,
          duration: 2 * 1000
        })
        return
      }
      this.$confirm('确认发布？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        publish(phase).then(res => {
          Message({
            message: '发布成功',
            type: 'success',
            duration: 2 * 1000
          })
          _this.toQuery()
          this.loading = false
        }, error => {
          console.log(error)
          this.loading = false
        })
      })
    },
    // 批量删除
    batchDelete() {
      var _this = this
      if (this.ids.length <= 0) {
        Message({
          message: '请选择删除项!',
          type: 'warning',
          duration: 2 * 1000
        })
        return
      }
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        batchDelete(this.ids).then(res => {
          Message({
            message: '删除成功',
            type: 'success',
            duration: 2 * 1000
          })
          _this.toQuery()
          _this.$refs.rule3Table.clearSelection(_this.multipleSelection)
        })
      })
    }
  }
}
</script>
